<template>
    <div class="all">
        <div style="margin-left: 10px;">
            <i class="el-icon-s-management"></i><span> 管理员管理</span>
        </div>
        <el-card>
            <div class="header">
                <el-button icon="el-icon-plus" size=" small" @click="chuangjian"> 创建</el-button>

            </div>
           
            <el-table :data="tableData" style="width: 100%" v-loading="loading">
                <el-table-column prop="id" label="管理员Id">
                </el-table-column>
                <el-table-column prop="username" label="管理员账号">
                </el-table-column>
                <el-table-column prop="privilege" label="权限">
                    <template v-slot="{ row }">
                        <span>
                            {{ row.group.length }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="password" label="密码">
                </el-table-column>
                <el-table-column label="操作">
                    <template v-slot="{ row }">
                        <el-button type="success" size="mini" @click="edit(row.id)">修改</el-button>
                        <el-button type="danger" size="mini" @click="delet(row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog title="编辑" :visible.sync="dialogFormVisible" :close-on-click-modal='false'>
            <adminadd @close="closed" :key="dialogFormVisible"></adminadd>
        </el-dialog>
        <el-dialog title="编辑" :visible.sync="dialogedit" :close-on-click-modal='false'>
            <adminedit @close="closed" :key="dialogedit" :id="id"></adminedit>
        </el-dialog>
    </div>
</template>

<script>
import { adminpage } from '@/api/admin';
import { majorpageCount } from '@/api/major';
import { admindelet } from '@/api/admin';
import adminadd from '@/components/admin/adminadd.vue';
import adminedit from '@/components/admin/adminedit.vue';
export default {
    components: {
        adminadd,
        adminedit
        // departmentedit
    },
    data() {
        return {
            // 页数
            page: 1,
            // 数据表格
            tableData: [],
            // 名字
            name: '',
            departmentName: "",
            total: 0,
            dialogFormVisible: false,
            dialogedit: false,
            id: "",
            loading: false,
            list: []
        }
    },
    methods: {
       
        // 列表
        getlist() {
            this.loading = true
            adminpage().then(res => {
                this.loading = false
                if (res.code === 0) {
                    console.log(res);
                    
                    this.tableData = res.data
                    this.list = []
                    res.data.forEach(item => {
                        item.group = []
                        for (let bit = 0; bit < 8; bit++) {
                            // 0100 0000
                            // 0010 0000
                            // 位运算
                            if (((1 << bit) & item.privilege) === 1 << bit) {
                                item.group.push((1 << bit));
                            }
                        }
                    })


                }

            })
        },
        // 搜索
        search() {
            this.getlist()
        },
        // 创建
        chuangjian() {
            this.dialogFormVisible = true
        },
        // 关闭窗口
        closed() {
            this.dialogFormVisible = false
            this.dialogedit = false
            this.getlist()
        },
        // 删除
        delet(val) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                admindelet(val).then(res => {
                    if (res?.code === 0) {
                        this.getlist()
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        })
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });


        },
        edit(val) {
            this.id = val
            this.dialogedit = true
        }


    },
    mounted() {
        this.getlist()

    }
}
</script>

<style lang="scss" scoped>
.all {
    background-color: #ccc;
    height: 100%;
    width: 100%;

    .el-card {

        width: 98%;
        margin: 5px auto 0;

        .header {
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>